<template>
  <view class="service-management">
    <header-vue :back="true" :title="title"></header-vue>
    <view class="service-management-content">
      <!-- 服务种类 -->
      <view class="service-section">
        <view class="section-title">
          <image :src="IMAGE_URL+'/static/master/title-icon.png'" class="title-icon"></image
          >服务种类</view
        >
        <view class="service-categories">
          <view
            v-for="(category, index) in serviceCategories"
            :key="index"
            class="category-item"
            :class="{ active: category.selected }"
            @click="toggleCategory(index)"
          >
            <text class="category-text">{{ category.name }}</text>
            <view v-if="category.selected" class="check-icon">
              <u-icon name="checkmark" color="#ffffff" size="16"></u-icon>
            </view>
          </view>
        </view>
      </view>

      <!-- 服务区域 -->
      <view class="service-section">
        <view class="section-title">
          <image :src="IMAGE_URL+'/static/master/title-icon.png'" class="title-icon"></image
          >服务区域</view
        >
        <view class="service-area" @click="handleAreaSelect">
          <text class="area-text">{{ serviceArea }}</text>
          <view class="arrow-icon">
            <u-icon name="arrow-right" color="#999" size="16"></u-icon>
          </view>
        </view>
      </view>
    </view>

    <!-- 固定在底部的保存按钮 -->
    <view class="fixed-bottom">
      <button class="save-btn" @click="handleSave">保存</button>
    </view>
  </view>
</template>

<script>
import headerVue from "@/components/header.vue";
import appConfig from "@/config/app.js";
    //  IMAGE_URL: appConfig.IMAGE_URL,
export default {
  data() {
    return {
      IMAGE_URL: appConfig.IMAGE_URL,
      title: "服务管理",
      serviceArea: "华望城悦华园二区",
      serviceCategories: [
        { name: "保洁清洁", selected: true },
        { name: "软装清洁", selected: false },
        { name: "电器清洗", selected: false },
        { name: "母婴服务", selected: false },
        { name: "家庭服务", selected: false },
        { name: "衣物洗护", selected: false },
        { name: "家具维修", selected: false },
        { name: "房屋维护", selected: false },
        { name: "家电维修", selected: false },
      ],
    };
  },
  components: {
    headerVue,
  },
  methods: {
    // 切换服务种类选择
    toggleCategory(index) {
      this.serviceCategories[index].selected =
        !this.serviceCategories[index].selected;
    },

    // 处理服务区域选择
    handleAreaSelect() {
      uni.showToast({
        title: "选择服务区域",
        icon: "none",
      });
      // 这里可以跳转到区域选择页面
    },

    // 处理保存
    handleSave() {
      const selectedCategories = this.serviceCategories.filter(
        (category) => category.selected
      );

      if (selectedCategories.length === 0) {
        uni.showToast({
          title: "请至少选择一个服务种类",
          icon: "none",
        });
        return;
      }

      uni.showLoading({
        title: "保存中...",
      });

      // 模拟保存操作
      setTimeout(() => {
        uni.hideLoading();
        uni.showToast({
          title: "保存成功",
          icon: "success",
          duration: 2000,
        });

        // 返回上一页
        setTimeout(() => {
          uni.navigateBack();
        }, 1500);
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.service-management {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  overflow: hidden;
  position: relative;
  background-color: #f6f6f6;

  .service-management-content {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    overflow-y: auto;
    padding: 28rpx 32rpx 120rpx 32rpx; /* 为底部按钮留出空间 */
  }

  .service-section {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 30rpx;
    padding: 30rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
  }

  .section-title {
    margin-bottom: 28rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    color: #333333;
    font-weight: 600;
  }
  .title-icon {
    width: 32rpx;
    height: 24rpx;
    margin-right: 10rpx;
  }

  .service-categories {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28rpx;
  }

  .category-item {
    position: relative;

    background: rgba(221, 221, 221, 0.13);
    border-radius: 10rpx 10rpx 10rpx 10rpx;
    border: 1rpx solid #dddddd;

    text-align: center;
    transition: all 0.3s ease;

    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24rpx;
    color: #999999;
    height: 50rpx;
    line-height: 50rpx;

    &.active {
      border: 1rpx solid #40a1da;
      background: rgba(31, 146, 214, 0.12);

      color: #40a1da;
    }
  }

  .check-icon {
    position: absolute;
    bottom: 0rpx;
    right: 0rpx;
    width: 24rpx;
    height: 24rpx;
    background: #40a1da;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .service-area {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .area-text {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
  }

  .arrow-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .fixed-bottom {
    position: fixed;
    bottom: 32rpx;
    left: 0;
    right: 0;
  }

  .save-btn {
    width: 630rpx;
    height: 76rpx;
    background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7, 133, 207, 0.1);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
    line-height: 76rpx;
    border: none;

    font-size: 36rpx;
    color: #ffffff;

    &::after {
      border: none;
    }

    &:active {
      background: linear-gradient(90deg, #0785cf 0%, #25a4ef 100%);
      transform: translateY(1rpx);
    }
  }
}
</style>
